<!DOCTYPE html>
<!--<html lang="en">-->
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <title>目录</title>
    <link rel="stylesheet" href="图标/css/font-awesome.css">
    <link rel="stylesheet" href="bt/css/bootstrap.css">
    <script src="jqueury.is"></script>
    <script src="bt/js/bootstrap.js"></script>
    <style>
        body{
          margin: 0;
            
        }
        #top{
            width: 100%;
            height: 380px;
            background: linear-gradient(to top, rgba(0,0,51,1),rgba(66,0,66,1));
            display: flex;
            flex-direction: column;
            

        }
        #toptop{
            width: 80%;
            height: 50px;
            /*border: solid 1px #00fffc;*/
            margin:15px auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            
            
        }
       #intopleft{
           color: #1d4691;
           font-size:30px;
           line-height: 50px;
       }
       #intopright{
           color: #1d4691;
           font-size: 30px;
           line-height: 50px;
       }
       #topunder{
           margin: 0 auto;
           width:680px;
           /*border: solid 1px #00fffc;*/
           height: 280px;
       }
       #topunderone{
           margin: 30px 0 0 0 ;
           width: 100%;
           height: 80px;
           font-size: 40px;
           color: #00fffc;
           text-align: center;
           line-height: 50px;
           font-family: Aharoni;
           

       }
       #topundertwo{
           margin: 30px 0 0 0;
           width: 100%;
           height: 30px;
           font-size: 20px;
           color: #00fffc;
           text-align: center;
           line-height:25px;

       }
       @keyframes down{
            0%{
                transform: translate(0,0);
            }   
            100%{
                transform: translate(0,150px);
            }         
        }
       #topunderthree{
           margin: 0 auto;
           width: 100%;
           height: 40px;
           font-size: 40px;
           color: #00fffc;
           text-align: center;
           line-height: 40px;
           animation:down 2s infinite; 
         
       }
       /*#between{
           background-color: #320c71;
           height: 50px;
       }*/
       #middle{
           background-color: #27075d;
           /*height: 800px;*/
           width: 100%;
           /*box-shadow: 0 0 10px 5px #440077;*/
           
       }
       #inmiddle{
           width: 80%;
           /*border: solid 1px #00fffc;*/
           height: 100%;
           margin: 0 auto;
           padding: 50px 0 50px 0;

       }
       .text{
           width: 100%;
           height: 300px;
           /*border: solid 1px #00fffc;*/

       }
       .title{
           width:100%;
           height: 60px;
           border-bottom:3px double #ffd200;
           margin: 0 auto;
           text-align: center;
           line-height: 60px;
           color: #00fffc;
           font-size: 30px;
           font-family: Aharoni;
       }
       .box{
           width: 100%;
           height: 250px;
           /*border: solid 1px #00fffc;*/
           display: flex;
           justify-content: space-between;
           
           
       }
       .inbox{
           width: 25%;
           height: 80%;
           border: solid 1px #1d4691;
           font-size: 30px;
           color: #00fffc;
           text-align: center;
           margin: 30px ;
           font-weight: 700;
           padding: 15px;
           background-color: #320c71;
           
       }
       .inbox:hover{
           background-color: #1e0355;
       }
        
       .a:hover{
           background-color: #1d4691;
           color: #00fffc;
       }
       .a{
           /*border: solid 1px #00fffc;*/
           background-color: #00fffc;
           border-radius: 5px;
           color: #1e0388;
           
          
       }
       .a:active{
           background-color: #ffd200;
           color: #320c71;
       }
      
       a:hover{
           text-decoration: none;
       }
       .photo{
           border-top: 1px solid #1d4691;
           border-bottom: 1px solid #1d4691;
           

           height: 100px;
           width: 100px;
           margin: 20px auto;
           padding: 3px;
       }
       .inphoto{
             height:90px;
             width:90px;

         }

       @media(max-width:720px){
            .text{
                width: 480px;
            }
            
            
            .inbox{
                width: 33%;
                font-size: 20px;
            }
        }

        @keyframes jright{
            0%{
                transform: translate(0,0);
            }   
            100%{
                transform: translate(150px,0);
            }         
        }
        #pp{
            animation: jright 2s infinite;

        }
        #under{
            width: 100%;
            height:230px;
            background-color: #320c71;
            padding: 15px;
        }
        #inunder{
            width: 80%;
            height: 80%;
            margin: 0 auto;
            /*border: 1px solid #00fffc;*/
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        .center{
            width: 30%;
            height: 200px;
            /*border: 1px solid #00fffc;*/
            color: #f2f2f2;
            /*text-align: center;*/
            font-size: 18px;
        }
        .mu{
            font-size: 30px;
            line-height: 200px;
        }
         
        #footer{
            width: 100%;
            height: 50px;
            color: #f2f2f2;
            background-color: #27075d;
            padding: 10px;
        }
        #infooter{
            width: 80%;
            margin: 0 auto;
            text-align: center;
            font-size: 12px;
        }
        @media(max-width:720px){
            #inunder{
                width: 450px;
            }
            .center{
                width: 30%;
                font-size:10px;
            }
            .mu{
                font-size: 25px;
            }
            #infooter{
                font-size: 10px;
            }
        }
        .yuan{
            border-radius: 50%;
            width: 65px;
            height: 65px;
            margin:15px;      
             }
             .b{
                 display: inline-block;
                 width: 100%;
                 height: 100%;
             }
             .c{
                 margin: 0;
                 list-style: none;

             }
         

    </style>

</head>
<body>
    <!--这是头-->
    <div id="top" >
        <div id="toptop">
            <div id="intopleft" class="fa fa-github">&nbsp;&nbsp;木曾和风</div>
            <div id="intopright"class="fa fa-fort-awesome"></div>
        </div>
        <div id="topunder">
            <div id="topunderone">ThiS Is A PrivatE WebsitE</div>
            <div id="topundertwo">此网站链接了一些个人的日常练习</div>
            <div id="topunderthree"><p  class="fa fa-chevron-down"></p></div>      
        </div>
        <div id="topright"></div>
    </div>
    <!--夹-->
    <div id="between"></div>
    <!--中间内容-->
    <div id="middle">
        <div id="inmiddle">
            <!--第一个框-->
            <div class="text">
                <div class="title">A SimplE LittlE GamE</div>
                <div class="box">

                    <div class="inbox" >
                        <a href="wuziqi" class="b" target="_blank">
                            <div class="c">
                                <p class="a">&nbsp;五子棋&nbsp;</p>
                                <div class="photo"><img class="inphoto" src="q.png" alt=""></div>
                            </div>
                        </a>
                    </div>


                    <div class="inbox">
                        <a href="piano" class="b" target="_blank">
                            <div class="c">
                                 <p class="a">&nbsp;PianO&nbsp;</p>
                                 <div class="photo"><img class="inphoto" src="gang.png" alt=""></div>
                            </div>
                        </a>
                    </div>
                    
                    <div class="inbox">
                        <a href="dishu" class="b" target="_blank">
                            <div class="c">
                                <p class="a">&nbsp;打地鼠&nbsp;</p>
                                <div class="photo"><img class="inphoto" src="shu.png" alt=""></div>
                            </div>
                        </a>
                    </div>
                   
                </div>
            </div>
            <!--第二个框-->
            <div class="text">
                <div class="title">FollowinG PracticE</div>
                <div class="box">

                    <div class="inbox">
                        <a href="lifangti" class="b" target="_blank">
                            <div class="c">
                                <p class="a">&nbsp;立方体&nbsp;</p>
                                <div class="photo"><img class="inphoto" src="fang.png" alt=""></div>
                            </div>
                        </a>
                    </div>
                    
                    <div class="inbox">
                        <a href="home" class="b" target="_blank">
                            <div class="c">
                                <p class="a">WebsitE</p>
                                <div class="photo"><img class="inphoto yuan" src="t.png" alt=""></div>
                            </div>
                        </a>

                    </div>

                    <div class="inbox">
                         <a href="https://www.baidu.com" class="b" target="_blank">
                            <div class="c">
                                <p class="a">Baidu</p>
                                <div class="photo"><img class="inphoto yuan" src="du.png" alt=""></div>
                            </div>
                        </a>
                    </div>
                   
                </div>
            </div>

             <!--第三个框-->
            <div class="text">
                <div class="title">JavaScripT PracticE OnE</div>
                <div class="box">

                    <div class="inbox">
                        <a href="shuzi" class="b" target="_blank">
                            <div class="c">
                                <p class="a">&nbsp;猜数字&nbsp;</p>
                                <div class="photo"><img class="inphoto" src="ccc.png" alt=""></div>
                            </div>
                        </a>
                    </div>
                    
                    <div class="inbox">
                        <a href="shui" class="b" target="_blank">
                            <div class="c">
                                <p class="a">税后工资</p>
                                <div class="photo"><img class="inphoto yuan" src="gg.png" alt=""></div>
                            </div>
                        </a>

                    </div>

                    <div class="inbox">
                         <a href="runnian" class="b" target="_blank">
                            <div class="c">
                                <p class="a">查询闰年</p>
                                <div class="photo"><img class="inphoto" src="year.png" alt=""></div>
                            </div>
                        </a>
                    </div>
                   
                </div>
            </div>

             <!--第4个框-->
            <div class="text">
                <div class="title">JavaScripT PracticE TwO</div>
                <div class="box">

                    <div class="inbox">
                        <a href="jiecheng" class="b" target="_blank">
                            <div class="c">
                                <p class="a">阶乘计算</p>
                                <div class="photo"><img class="inphoto yuan" src="jc.png" alt=""></div>
                            </div>
                        </a>
                    </div>
                    
                    <div class="inbox">
                        <a href="zhishu" class="b" target="_blank">
                            <div class="c">
                                <p class="a">查询质数</p>
                                <div class="photo"><img class="inphoto" src="zzz.png" alt=""></div>
                            </div>
                        </a>

                    </div>

                    <div class="inbox">
                         <a href="clock" class="b" target="_blank">
                            <div class="c">
                                <p class="a">电子表</p>
                                <div class="photo"><img class="inphoto " src="bbb.png" alt=""></div>
                            </div>
                        </a>
                    </div>
                   
                </div>
            </div>


 <!--第5个框-->
            <div class="text">
                <div class="title">JavaScripT PracticE ThreE</div>
                <div class="box">

                    <div class="inbox">
                        <a href="dazi" class="b" target="_blank">
                            <div class="c">
                                <p class="a">打字练习</p>
                                <div class="photo"><img class="inphoto yuan" src="mmm.png" alt=""></div>
                            </div>
                        </a>
                    </div>
                    
                    <div class="inbox">
                        <a href="kaichuang" class="b" target="_blank">
                            <div class="c">
                                <p class="a">开窗</p>
                                <div class="photo"><img class="inphoto" src="pa.png" alt=""></div>
                            </div>
                        </a>

                    </div>

                    <div class="inbox">
                         <a href="clock" class="b" target="_blank">
                            <div class="c">
                                <p class="a">等待加入</p>
                                <div class="photo"><img class="inphoto " src="du.png" alt=""></div>
                            </div>
                        </a>
                    </div>
                   
                </div>
            </div>



            <!--第6个框-->
            <div class="text">
                <div class="title">To Be ContinueD<span id="pp" class="fa fa-angle-double-right"></span></div>
                <div class="box">
                </div>
            </div>



        </div>
    </div>
    <!--下面联系-->
    <div id="under">
        <div id="inunder">
            <div class="center">
                <p class="fa fa-github mu">&nbsp;&nbsp;木曾和风</p>
            </div>
            <div class="center">
                <p>联系我：</p>
                <p class="fa fa-qq">&nbsp;&nbsp;&nbsp;562244273</p>
                <br>
                <p class="fa fa-wechat">&nbsp;&nbsp;&nbsp;w562244273</p>
                <br>
                <p class="fa fa-phone">&nbsp;&nbsp;&nbsp;&nbsp;13073705120</p>
                <br>
                <p class="fa fa-weibo">&nbsp;&nbsp;&nbsp;故事讲到了哪H</p>
                
            </div>
            <div class="center" >
                <p>技术支持：</p>
                <p class="fa fa-flag ">&nbsp;&nbsp;&nbsp;Font Awesome</p>
                <br>
                <p class="fa fa-bold">&nbsp;&nbsp;&nbsp;&nbsp;Bootstrap</p>
                
            </div>
        </div>
    </div>
    <!--公安-->
    <div id="footer">
        <div id="infooter">京ICP备110XXXXX号&nbsp;&nbsp;|&nbsp;&nbsp;京公网安备110XXXXXXXXXXX</div>
    </div>
    <!--目前不用-->
    <!--<div>
        <ul>
            <h1>目录</h1>
            <li>
                <a href="home">个人主页</a>
            
            </li>
            <li>
                <a href="wuziqi">五子棋</a>
            </li>
            <li>
                <a href="lifangti">立方体</a>
            </li>
            <li>
                <a href="dishu">打地鼠</a>
            </li>
            <li>
                <a href="piano">钢琴</a>
            </li>
        </ul>
    </div>-->
</body>
</html>